<!-- 标签创建类型 -->
<template>
  <el-dialog
    class="dialogAdapter"
    :destroy-on-close="true"
    style="border-radius: 10px"
    @close="handleClose"
    v-model="props.visible"
    :title="'生成订单'"
  >
    <!--from -->
    <el-form ref="ruleFormRef" :model="d.form" label-position="top">
      <el-form-item
        prop="price"
        label="价格"
        :rules="[
          { required: true, message: '请输入价格' },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输⼊正确的格式,可保留两位⼩数'
          }
        ]"
      >
        <el-input v-model="d.form.price" autocomplete="off" placeholder="请输入价格" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button v-if="!type" type="danger" @click="submitForm(ruleFormRef)"> 生成 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance } from "element-plus"
import { onMounted, reactive, ref } from "vue"
// @ts-ignore
import { APIBillAdd } from "@/api/apiSetting"
import debounce from "@/utils/debounce"
import pubsub from "pubsub-js"

interface Props {
  editData?: any
  type?: string
  visible: boolean
}

const emits = defineEmits(["editDpData", "close"])
const props = defineProps<Props>()
const ruleFormRef = ref()

// 云模型from
const d = reactive({
  form: {
    price: ""
  }
})

// 清空数据
const dfData = {
  price: ""
}

onMounted(() => {
  if (props.editData && props.type) {
    d.form = props.editData
  }
})

// 创建提交
const submitForm = debounce((formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      let { code } = await APIBillAdd(d.form)
      if (code === 200) {
        pubsub.publish("UPDATETAGSLLIST")
        handleClose()
        ElMessage({
          type: "success",
          message: "生成成功"
        })
        d.form = dfData
      }
    } else {
      console.log("error submit!")

      return false
    }
  })
}, 300)

const handleClose = () => {
  emits("close")
}
</script>
<style lang="scss" scoped></style>
